import React, {memo} from 'react';
import {Card, Radio} from 'antd';
import {FormattedMessage} from '@/utils/locale';
import styles from './Analysis.less';
import {Pie} from '@/components/Charts';
import Yuan from '@/utils/Yuan';

const ProportionSales = memo(
  ({dropdownGroup, salesType, loading, salesPieData, handleChangeSalesType}) => (
    <Card
      loading={loading}
      className={styles.salesCard}
      bordered={false}
      title={
        <FormattedMessage
          id="app.analysis.the-proportion-of-sales"
          defaultMessage="The Proportion of Sales"
        />
      }
      bodyStyle={{padding: 24}}
      extra={
        <div className={styles.salesCardExtra}>
          {dropdownGroup}
          <div className={styles.salesTypeRadio}>
            <Radio.Group value={salesType} onChange={handleChangeSalesType}>
              <Radio.Button value="all">
                <FormattedMessage id="app.analysis.channel.all" defaultMessage="ALL"/>
              </Radio.Button>
              <Radio.Button value="online">
                <FormattedMessage id="app.analysis.channel.online" defaultMessage="Online"/>
              </Radio.Button>
              <Radio.Button value="stores">
                <FormattedMessage id="app.analysis.channel.stores" defaultMessage="Stores"/>
              </Radio.Button>
            </Radio.Group>
          </div>
        </div>
      }
      style={{marginTop: 24}}
    >
      <div
        style={{
          minHeight: 380,
        }}
      >
        <h4 style={{marginTop: 8, marginBottom: 32}}>
          <FormattedMessage id="app.analysis.sales" defaultMessage="Sales"/>
        </h4>
        <Pie
          hasLegend
          subTitle={<FormattedMessage id="app.analysis.sales" defaultMessage="Sales"/>}
          total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
          data={salesPieData}
          valueFormat={value => <Yuan>{value}</Yuan>}
          height={248}
          lineWidth={4}
        />
      </div>
    </Card>
  )
);

export default ProportionSales;
